<template>
    <view class="home u-flex-col">
      <u-navbar :background="{ backgroundColor: 'rgb(61, 95, 255)' }" title="筛选" back-icon-color="#fff"
        title-color="#fff"></u-navbar>

      <view class="u-p-l-20 u-p-r-20 form">
        <u-form :model="form" ref="uForm">

          <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="可采情况"
            prop="canDiggingSituation">
            <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.canDiggingSituation"
              :custom-check-style="customCheckStyle" @click="clickBtn($event,'canDiggingSituation')"></chooseBtn>
          </u-form-item>
          <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="主要煤种"
            prop="importantCol">
            <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.importantCol"
              :custom-check-style="customCheckStyle" @click="clickBtn($event,'importantCol')"></chooseBtn>
          </u-form-item>
          <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="突出危险性"
            prop="isDanger">
            <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.isDanger"
              :custom-check-style="customCheckStyle" @click="clickBtn($event,'isDanger')"></chooseBtn>
          </u-form-item>
          <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="自燃倾向性"
            prop="autoigntion">
            <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.autoigntion"
              :custom-check-style="customCheckStyle" @click="clickBtn($event,'autoigntion')"></chooseBtn>
          </u-form-item>
          <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="煤尘爆炸性"
            prop="dustExplosion">
            <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.dustExplosion"
              :custom-check-style="customCheckStyle" @click="clickBtn($event,'dustExplosion')"></chooseBtn>
          </u-form-item>
          <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="水害"
            prop="waterDamage">
            <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.waterDamage"
              :custom-check-style="customCheckStyle" @click="clickBtn($event,'waterDamage')"></chooseBtn>
          </u-form-item>
          <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="热害"
            prop="heatDamage">
            <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.heatDamage"
              :custom-check-style="customCheckStyle" @click="clickBtn($event,'heatDamage')"></chooseBtn>
          </u-form-item>

        </u-form>
      </view>
      <view class="u-flex u-row-between u-p-t-20">
        <u-button :hair-line="false" shape="circle" form-type="reset" :custom-style="formCustomStyle" throttle-time="500"
          @click="reset">重置</u-button>
        <u-button :hair-line="false" shape="circle" :custom-style="formSubmitStyle" form-type="submit" throttle-time="500"
          @click="submit">确定</u-button>
      </view>

    </view>
  </template>

  <script>
  import chooseBtn from "@/pages/components/chooseBtn";

  export default {
    name: "screen",
    components: {
      chooseBtn,
    },
    data () {
      return {
        form: {

        },
        customBoxStyle: {
          justifyContent: "space-start",
        },
        // 按钮组组件样式
        customBtnStyle: {
          background: "#fff",
          border: "1px solid #fff",
          padding: "0rpx 20rpx",
          marginRight: "20rpx",
          borderRadius: "32rpx",
          fontWeight: 400,
          color: "#666666",
        },
        customCheckStyle: {
          background: "#fff",
          padding: "0rpx 20rpx",
          marginRight: "20rpx",
          borderRadius: "32rpx",
          border: "1px solid #288CFE",
          fontWeight: 400,
          color: "#288CFE",
        },
        // 按钮组组件数据，数据checked是是否选中的，默认false布尔值，必填，label也是必填
        objList: {},
        labelStyle: {
          color: "#333333",
          fontWeight: "600",
        },
        formCustomStyle: {
          color: "#000",
          border: "1rpx solid #ddd",
          background: "#fff",
          width: "40%",
        },
        formSubmitStyle: {
          color: "#ffffff",
          background: "#288CFE",
          width: "40%",
          border: "none",
        },
      };
    },
    async mounted () {

    },
    methods: {
      getLabels(){
        this.$post('/cjt/app/getLabels').then(res=>{
          this.objList = res.body
          this.init()
        })
      },
      init () {
        for (const key in this.objList) {
          this.objList[key].forEach(el => {
          if (this.form[key]?.includes(el.id)) {
            el.checked = true
          } else {
            el.checked = false
          };
        });
        }
      },
      //按钮方法
      clickBtn (res,name) {
        if(res&&res.length){
          this.form[name]=res.map(item=>item.id).join(',')
        }else{
            this.form[name]=''
        }
      },
      submit () {
        const params = {
          ...this.form,
        }
        uni.$emit(this.emitEvent, params)
        uni.navigateBack({
          delta: 1
        })
      },
      reset () {
        this.form = {
          ...this.form,
          canDiggingSituation:'',
          importantCol:'',
          isDanger:'',
          dustExplosion:'',
          waterDamage:'',
          heatDamage:'',
          autoigntion:''
        }
        this.init();
      },
    },

    onLoad (options) {
      const { form, emitEvent } = options
      const obj = JSON.parse(form)
      this.form = { ...this.form, ...obj }
      this.emitEvent = emitEvent
      this.getLabels()
    },
  };
  </script>

  <style lang="scss" scoped>
  .home {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    .form {
      /deep/.u-form-item {
        padding: 0;
      }

      /deep/.u-input {
        .u-input__right-icon--select {
          display: none;
        }
      }

    }

    .confrim-btn {
      position: absolute;
      width: 100%;
      bottom: 20rpx;
      z-index: 1;
    }
  }

  .time-body {
    position: relative;
    width: 100%;
  }
  /deep/ .box {
    .tag{
    margin-top: 5px;
  }
  }
  </style>
